<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,address=no">
    <!-- 腾讯X5内核扩展（可选）：<meta name="x5-page-mode" content="no-title"> -->

    <title>《属于成县F6自己的赛尔号》</title>

    <!-- 统一使用 output.css，不再有内联 <style> 块 -->
    <link rel="stylesheet" href="output.css?v=1252">

    <!-- Font Awesome 和 PressStart2P 字体文件 -->
    <link rel="stylesheet" href="./fonts/css/fontawesome.min.css">
    <link rel="stylesheet" href="./fonts/PressStart2P.css">

</head>

<body>
    <!-- 开始界面 -->
    <div id="start-screen" class="start-screen">
        <h1 class="title">《属于成县F6自己的赛尔号》</h1>
        <p class="subtitle">把手里的事先放哈，xing个你呆角色，把其他5个人弄翻过！</p>
        <button id="start-button" class="btn btn-primary">开始游戏</button>
    </div>

    <!-- 角色选择 -->
    <div id="character-selection" class="character-selection hidden">
        <h2 class="title">选择你的角色</h2>
        <div class="character-grid"></div> <!-- 这个容器将变为水平滑动 -->
        <button id="back-to-start" class="btn btn-secondary mt-4">返回</button>
    </div>

    <!-- 战斗界面 -->
    <div id="battle-screen" class="battle-container hidden">
        <div class="battle-header">
            <h2>战斗进行中</h2>
        </div>

        <div class="battle-field">
            <div class="enemy-area">
                <div class="status-bar enemy-status">
                    <div class="flex justify-between items-center mb-1">
                        <h3 id="enemy-name"></h3>
                        <span id="enemy-element" class="px-2 py-1 rounded-full text-xs"></span>
                    </div>
                    <div>
                        <div class="health-bar">
                            <div id="enemy-hp-bar" class="health-fill" style="width:100%"></div>
                        </div>
                        <div class="text-xs" id="enemy-hp-text">100/100</div>
                    </div>
                    <div>
                        <div class="health-bar">
                            <div id="enemy-mp-bar" class="mana-fill" style="width:100%"></div>
                        </div>
                        <div class="text-xs" id="enemy-mp-text">100/100</div>
                    </div>
                    <!-- 新增：状态图标容器 -->
                    <div id="enemy-status-icons" class="status-icons"></div>
                </div>

                <div class="relative">
                    <img id="enemy-sprite" src="" alt="敌人" class="object-contain">
                </div>

                <div id="enemy-skills" class="skills-container">
                    <!-- JS 会在这里填充技能 -->
                </div>
            </div>

            <div class="player-area">
                <div class="status-bar player-status">
                    <div class="flex justify-between items-center mb-1">
                        <h3 id="player-name"></h3>
                        <span id="player-element" class="px-2 py-1 rounded-full text-xs"></span>
                    </div>
                    <div>
                        <div class="health-bar">
                            <div id="player-hp-bar" class="health-fill" style="width:100%"></div>
                        </div>
                        <div class="text-xs" id="player-hp-text">100/100</div>
                    </div>
                    <div>
                        <div class="health-bar">
                            <div id="player-mp-bar" class="mana-fill" style="width:100%"></div>
                        </div>
                        <div class="text-xs" id="player-mp-text">100/100</div>
                    </div>
                    <!-- 新增：状态图标容器 -->
                    <div id="player-status-icons" class="status-icons"></div>
                </div>

                <div class="relative">
                    <img id="player-sprite" src="" alt="玩家" class="object-contain">
                </div>
            </div>

            <div class="level-info">战斗 <span id="current-level">1</span>/<span id="total-levels">5</span></div>

            <div class="battle-info">
                <div id="battle-status" class="turn-indicator">你的回合</div>

                <div class="log-container" id="log-container">
                    <ul id="battle-log"></ul>
                </div>

                <div class="skills-container">
                    <button class="skill-button">
                        <div class="flex justify-between items-start">
                            <span data-skill-name>技能1</span>
                            <span class="text-xs bg-gray-700 px-1 rounded" data-skill-pp>10/10</span>
                        </div>
                        <span class="text-xs text-gray-400" data-skill-desc>技能描述</span>
                        <span class="text-xs text-mp text-right" data-skill-cost>消耗: 5 MP</span>
                    </button>
                    <button class="skill-button">
                        <div class="flex justify-between items-start">
                            <span data-skill-name>技能2</span>
                            <span class="text-xs bg-gray-700 px-1 rounded" data-skill-pp>10/10</span>
                        </div>
                        <span class="text-xs text-gray-400" data-skill-desc>技能描述</span>
                        <span class="text-xs text-mp text-right" data-skill-cost>消耗: 8 MP</span>
                    </button>
                    <button class="skill-button">
                        <div class="flex justify-between items-start">
                            <span data-skill-name>技能3</span>
                            <span class="text-xs bg-gray-700 px-1 rounded" data-skill-pp>10/10</span>
                        </div>
                        <span class="text-xs text-gray-400" data-skill-desc>技能描述</span>
                        <span class="text-xs text-mp text-right" data-skill-cost>消耗: 10 MP</span>
                    </button>
                    <button class="skill-button">
                        <div class="flex justify-between items-start">
                            <span data-skill-name>技能4</span>
                            <span class="text-xs bg-gray-700 px-1 rounded" data-skill-pp>10/10</span>
                        </div>
                        <span class="text-xs text-gray-400" data-skill-desc>技能描述</span>
                        <span class="text-xs text-mp text-right" data-skill-cost>消耗: 15 MP</span>
                    </button>
                </div>

                <button id="pause-button" class="btn btn-secondary mt-2">暂停</button>
            </div>
        </div>
    </div>

    <!-- 结果弹窗 -->
    <div id="result-modal" class="modal hidden">
        <div class="modal-content">
            <h2 id="result-title" class="title mb-4"></h2>
            <p id="result-message" class="mb-6"></p>
            <button id="next-level" class="btn btn-primary">下一关</button>
            <button id="restart-game" class="btn btn-secondary">重新开始</button>
        </div>
    </div>

    <!-- 暂停菜单 -->
    <div id="pause-menu" class="modal hidden">
        <div class="modal-content">
            <h2 class="title mb-4">游戏暂停</h2>
            <button id="resume-game" class="btn btn-primary">继续游戏</button>
            <button id="restart-from-pause" class="btn btn-secondary">重新开始</button>
            <button id="return-to-character" class="btn btn-secondary">返回角色选择</button>
        </div>
    </div>

    <script src="game.js?v=1252"></script>
</body>

</html>
